<template>
		<view v-if="visible" style="width:100%;">
			<view style="background-color: #e0e0e0;">
				<view class="profile-section">
					<image :src="miniUserInfo.avatar" class="avatar" @click="changeAvatar"></image>
					<view class="info-item">
						<text>账号：</text>
						<text>{{miniUserInfo.phone}}</text>
					</view>
					<view class="logout" @click="miniLogout">
						<uni-icons type="right" color="black" size="25"></uni-icons>
					</view>
					<view style="height: 100px;"></view>
				</view>
			</view>
			<view style="width: 100%;display: flex;align-items: center;">
				<uni-search-bar @confirm="search" v-model="searchValue"
				placeholder="请输入商户密码"
					style="width: 85%;"
				  cancelButton="none"
				  @input="input">
				  <template v-slot:searchIcon>
				  	</template>
					</uni-search-bar>
					<text>查询</text>
			</view>
			<view style="width:100%;height: 100%;margin-left: 7px; display: flex;flex-direction: column; ">
			       <image :src="joinUrl" mode="scaleToFill"
			   	style="width: 95%;height: 150px;border-radius: 6px;" />
				<image :src="miniUserInfo.userPic" mode="scaleToFill"
				 style="width: 95%;height: 150px;margin-top: 8px;border-radius: 6px;" />
			</view>
				
		</view>
	
		<view v-else>
			<button class="button-wrapper"
			 type="default"
			 open-type="getPhoneNumber" 
			 @getphonenumber="phoneLogin">登录</button>
		</view>
<view style="position: relative; bottom: 10%; left: 30%;margin-top: 10px;">
					<text>版本号：{{version}}</text>
				</view> 
</template>

<script setup>
import { login,logout,update} from '../../api/user';
import {onMounted, reactive, ref} from 'vue'
import { setToken,getToken,setUserInfoToken,getUserInfoToken } from '../../utils/auth';

const visible=ref(false)
const recycleAD=ref('')
const joinUrl=ref('')
const phoneAD=ref('')
const version=ref('')
const searchValue=ref('')
const height=ref()
const miniUserInfo=ref({id:0,nickname:'',phone:'',avatar:'',userPic:'',token:'',loginTime:'',expireTime:''})
onMounted(()=>{
	const token=getToken()
	const userinfo=getUserInfoToken()
	
	joinUrl.value=uni.getStorageSync('joinUrl')
	const info = wx.getWindowInfo()
	height.value=info.safeArea.height
	const accountInfo = wx.getAccountInfoSync();
	    version.value = accountInfo.miniProgram.version;
	if(token&&userinfo){
		miniUserInfo.value=userinfo
		visible.value=true
	}else{
		visible.value=false
	}
})

const miniLogout=async()=>{
	uni.clearStorageSync()
	const res=await logout()
	if(res.code==200){
		uni.showToast({
			title: '退出成功',
			icon:'none'
		});
		visible.value=false
	}
}

const search=()=>{
	
}

const input=()=>{
	
}

const updateUserInfo=async()=>{
	
const{data}=await update(miniUserInfo.value)
miniUserInfo.value=data
setUserInfoToken(miniUserInfo.value)
}

const phoneLogin=(e)=>{
	if(e.detail.code == undefined) {
			return
		}else{
			uni.login({
				provider:"weixin",
				success:res=>{
					miniLogin(res.code, e.detail.code)
				}
			})
		}	
}


const miniLogin = async (code, pCode) => {
	const res = await login({code:code,pCode:pCode})
	miniUserInfo.value = res.userinfo
	
	// 将信息存入本地
	setToken(miniUserInfo.value.token)
	if(miniUserInfo.value.emp==true){
		uni.setStorageSync('sharePhone',miniUserInfo.value.phone)
		uni.$emit('cardUpdate',miniUserInfo.value.phone)
	}
	
	setUserInfoToken(miniUserInfo.value)
	visible.value=true
}
	
</script>

<style scoped>
	.button-wrapper {
	    text-align: center; /* 水平居中 */
	    margin-top: 90%; /* 将按钮推向垂直中间 */
	    transform: translateY(-80%); /* 调整按钮位置以实现精确居中 */
		background-color: rgb(27, 157, 53);
		width: 60%; 
		color: white;
	}
	.logout{
		right: 50%;
	}
	
	.profile-section {
		margin-left: 3px;
		justify-content: space-between;
		color: white;
		display: flex;
		align-items: center;
	}
	
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.info-item {
		display: flex;
		flex-grow: 1;
		color: black;
		padding: 20rpx 0; 
	}
	
</style>